<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- dialog </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../production/primeui-1.0-min.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
	</head>

	<body ng-controller="MainCtrl">

	<button type="button" pui-button="" data-button-type="left" 
		data-icon="ui-icon-arrow-4-diag" 
		ng-click="ctrl.isShow = true;">Open a dialog</button>

	<script type="text/x-template" pui-dialog="{title: 'AA', showModel: 'ctrl.isShow', height: 150, block: true}">
	<div class="pui-dialog-content ui-widget-content" style="height: auto;">
		{{test|json}}
	</div>
	<div class="pui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
		<button type="button" pui-button="" 
			ng-click="doSth();" 
			data-button-type="left" data-icon="ui-icon-check">Check</button>

		<button type="button" pui-button="" data-button-type="left" 
			data-icon="ui-icon-arrow-4-diag" 
			ng-click="ctrl.isShowInner = true;">Open inner dialog</button>
	</div> 
	</script>

	<script type="text/x-template" pui-dialog="{title: 'BB', showModel: 'ctrl.isShowInner', height: 200, block: true}">
	<div class="pui-dialog-content ui-widget-content" style="height: auto;">
		{{test|json}}
	</div>
	<div class="pui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
		<button type="button" pui-button="" 
			ng-click="ctrl.isShowInner = false" 
			data-button-type="left" data-icon="ui-icon-close">Close</button>
	</div> 
	</script>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="underscore.min.js"></script>
	<script type="text/javascript" src="zepto-1.1.3.js"></script>
	<script type="text/javascript" src="base.js"></script>
	<script type="text/javascript" src="all.js"></script>
	<script language="javascript">
	var md = angular.module('md', ['pui']);

	md.controller('MainCtrl', function($scope, $timeout){
		$scope.ctrl = {isShow: false};
		$scope.test = {name: 'xxx'};
		var i = 0;
		for(; i < 20; i++){
			$scope.test['key' + i] = 'value' + i;
		}

		$scope.doSth = function(){
			$scope.test.xxx = 'yyy';
		};
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>